<template>
  <div class="register">
    <div class="back" @touchend="backTouch"></div>
    <div class="box">
      <div class="title">{{title}}</div>
      <div class="point">{{point}}</div>
      <div class="codeShow" v-if="codeShow">
        <div class="codeBox">
          <div v-for="index in 4" :key="index">{{code[index-1]}}</div>
        </div>
        <input class="code" type="number" v-model="code" pattern="number"
          oninput="if(value.length>4)value=value.slice(0,4)" />
        <div class="agianStep" :style="aiganStyle" @touchend="count===0?phoneStep():''">
          <span>{{count>0?count:""}}</span>
        </div>
      </div>
      <div class="notCodeShow" v-if="!codeShow">
        <input class="phone" type="number" pattern="number" v-model="phone"
          oninput="if(value.length>11)value=value.slice(0,11)" />
        <div class="inputClean" :style="cleanStyle" @touchend="cleanInput"></div>
        <div class="step" @touchstart="phoneStep"></div>
        <div class="wechatTitle"></div>
        <div class="wechat" @touchend="wechat"></div>
      </div>
    </div>
    <div class="popup" v-if="popup">{{popup}}</div>
  </div>
</template>

<script>
import { mapActions } from "vuex"
export default {
  data() {
    return {
      y: 0,
      codeShow: false,
      title: "完善身份信息",
      point: "未完善信息用户默认登录成为绘本侠会员",
      popup: "",
      phone: "",
      code: "",
      count: 30,
      time: null
    };
  },
  mounted() {
    //监听键盘显示隐藏 移动输入框
    window.addEventListener('keyboardDidShow', () => {
      this.y = this.codeShow ? -3.5 : -2
    })
    window.addEventListener('keyboardDidHide', () => {
      this.y = 0
    })
  },
  computed: {
    //输入框icon样式
    cleanStyle() {
      const gray = this.phone ? 0 : 1,
        opacity = this.phone ? 1 : 0.3
      return {
        filter: "grayscale(" + gray + ")",
        opacity: opacity
      }
    },
    registerStyle() {
      return {
        marginTop: this.y + "rem"
      }
    },
    aiganStyle() {
      const background = this.count === 0 ? "重新发送" : "重新发送不可点击"
      return {
        background: "url(" + this.variable.STATICE_URLTITLE + "user/" + background + ".png) 0 0/100% 100%"
      }
    }
  },
  methods: {
    //返回至列表
    backTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/personal/menu" })
        }
      })
    },
    //点击验证手机号
    phoneStep: async function () {
      this.touchMusic()
      this.count = 30
      if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
        this.phone = ""
        this.popup = "请输入正确的手机号"
      }
      //通过验证开始倒计时
      else {
        const json = {
          deviceUuid: this.deviceUuid,
          phoneNumber: this.phone
        }
        const [data, err] = await this.awaitWarp(this.$post(this.api.sendCaptcha, json))
        if (err) console.log(err)
        if (data.error === 'phoneNumberUsed') {
          this.popup = "该手机号已被另一台设备绑定"
        }
        else {
          this.codeShow = true
          this.title = "请输入验证码"
          this.point = "验证码已发送至 " + this.phone
          this.time = setInterval(() => { this.count-- }, 1000)
        }
      }
    },
    //验证验证码
    codeStep: async function () {
      const json = {
        deviceUuid: this.deviceUuid,
        phoneNumber: this.phone,
        captcha: this.code
      }
      const [data, err] = await this.awaitWarp(this.$post(this.api.checkCaptcha, json))
      if (err) console.log(err)
      if (data.error === "phoneNumberUsed") {
        this.popup = "该手机号已被另一台设备绑定"
      }
      else {
        if (data.valid) {
          this.setUserPhoneNumber(this.phone)
          this.setLoading({
            callback: () => {
              this.$router.replace({ path: "/personal/information" })
            }
          })
        }
        else {
          this.code = ""
          this.popup = "验证码错误,请重新输入"
        }
      }
    },
    //清空手机号
    cleanInput: function () {
      this.phone = ""
    },
    //微信登录
    wechat: function () {
      WeixinFeature.bind({
        onBound: () => {
          // 绑定成功，用户数据即会入库
          this.updateWeixinBound()
          this.setLoading({
            callback: () => {
              this.$router.replace({ path: "/personal/information" })
            }
          })
        },
        onCanceled: () => {

        },
        onError: () => {
          // 网络异常

        }
      })
    },
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("personalStatus", ["setUserPhoneNumber", "updateWeixinBound"])
  },
  watch: {
    popup() {
      setTimeout(() => {
        this.popup = ""
      }, 800)
    },
    code(code) {
      if (code.length === 4) {
        this.codeStep()
      }
    },
    count(newCount) {
      if (newCount === 0) {
        window.clearInterval(this.time)
      }
    }
  }
};
</script>

<style scoped lang='stylus'>
.register
  position absolute
  width 100%
  height 100%
  background url($urlTitle + 'user/背景.png') 0 0 / 100% 100%
  .back
    z-index 99
    transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0)
    background url($urlTitle + 'icon/icon-返回.png') 0 0 / 100% 100%
    $coord('WHLT', 11vh, 10.8vh, 2rem, 1rem)
  .popup
    z-index 99
    transform translate3d(0, calc(0px - var(--Y)), 0)
    min-width 9rem
    height 1.8rem
    width auto
    background rgba(0, 0, 0, 0.3)
    line-height 1.8rem
    display inline-block
    border-radius 0.3rem
    color white
    margin-top 82vh
    box-sizing border-box
    padding 0 1rem
  .box
    position absolute
    $center('WHLT', 48rem, 18rem)
    .title
      position absolute
      color rgb(254, 150, 2)
      font-size 1.6rem
      $center('WHL_T', 10rem, 1.5rem, 0rem)
    .point
      position absolute
      $center('WHL_T', 18rem, 0.9rem, 2.5rem)
      color rgb(255, 186, 88)
      opacity 0.9
      font-size 1rem
    .codeBox
      position absolute
      $center('WHL_T', 14.1rem, 2.8rem, 5rem)
      div
        float left
        width 3rem
        height 3rem
        border 0.08rem solid rgb(253, 209, 146)
        border-radius 0.3rem
        box-sizing border-box
        margin 0 0.25rem 0 0.25rem
        color rgb(254, 150, 2)
        font-size 2rem
        $alignCenter()
        font-weight 800
    .code
      position absolute
      $center('WHL_T', 20rem, 2.8rem, 5rem)
      opacity 0
    .phone
      position absolute
      $center('WHL_T', 20rem, 2.8rem, 5rem)
      background transparent
      box-sizing border-box
      border-radius 2rem
      border 0.05rem solid rgb(252, 222, 177)
      padding-left 1.5rem
      font-size 1.5rem
      color rgb(253, 209, 146)
      letter-spacing 0.5rem
      outline none
    .inputClean
      background url($urlTitle + 'user/清空.png') 0 0 / 100% 100%
      $coord('WHLT', 1.5rem, 1.5rem, 31.5rem, 5.65rem)
      transition all 0.5s
    .step
      background url($urlTitle + 'user/下一步.png') 0 0 / 100% 100%
      position absolute
      $center('WHL_T', 5.8rem, 2.2rem, 10rem)
    .agianStep
      background url($urlTitle + 'user/重新发送.png') 0 0 / 100% 100%
      position absolute
      $center('WHL_T', 5.8rem, 2.2rem, 10rem)
      span
        font-size 0.8rem
        $coord('WHRT', 1rem, 1rem, 0.8rem, 0.6rem)
        color gray
        $alignCenter()
    .wechatTitle
      background url($urlTitle + 'user/微信登录.png') 0 0 / 100% 100%
      position absolute
      $center('WHL_T', 16.5rem, 0.9rem, 14rem)
    .wechat
      background url($urlTitle + 'user/微信图标.png') 0 0 / 100% 100%
      position absolute
      $center('WHL_T', 2.01rem, 2rem, 16rem)
  .code
    $coord('WHLT', 5.5rem, 0.1rem, 50%, 50%)
    background url($urlTitle + 'information/实线.png') 0 0 / 100% 100%
    transform translateY(calc(0px - var(--Y)))
    input
      $coord('WHLB', 5.5rem, 1.2rem, 0rem, 0.4rem)
      padding-left 0.35rem
      font-size 1.3rem
      color gray
      letter-spacing 0.56rem
      outline none
      border none
    .again
      background url($urlTitle + 'information/email.png') 0 0 / 100% 100%
      $coord('WHLB', 1.2rem, 0.8rem, 6.3rem, 0.1rem)
      span
        $coord('WHLB', 8rem, 1rem, 1.2rem, -0.15rem)
        letter-spacing 0.12rem
        font-size 0.8rem
        color gray
    .codeStep
      background rgb(253, 173, 117)
      $coord('WHLT', 4.5rem, 1.75rem, 12.5rem, 1rem)
      border-radius 0.8rem
      $alignCenter()
      font-size 0.8rem
      color white
      text-shadow 0 1px 1px rgb(253, 173, 117)
      letter-spacing 0.1rem
</style>
